<template>
  <div :class="classValue" :style="styleValue">
    <image v-if="url" :src="url" :style="imageStyleValue" />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  name: {
    type: String,
    default: ''
  },
  className: {
    type: String,
    default: ''
  },
  size: {
    type: [String, Number],
    default: ''
  },
  color: {
    type: String,
    default: ''
  },
  url: {
    type: String,
    default: ''
  },
  width: {
    type: [String, Number],
    default: ''
  },
  height: {
    type: [String, Number],
    default: ''
  }
})

const styleValue = computed(() => {
  return {
    fontSize: props.size + 'rpx',
    lineHeight: props.size + 'rpx',
    color: props.color
  }
})
const imageStyleValue = computed(() => {
  return {
    width: (props.width || props.size) + 'rpx',
    height: (props.height || props.size) + 'rpx',
    fontSize: (props.height ? 0 : props.size) + 'rpx'
  }
})
const classValue = computed(() => {
  return ['iconfont', props.name, props.className]
})
</script>

<style scoped lang="scss"></style>
